<template>
  <!--修改角色-->
  <el-dialog
      title="编辑角色"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="onClose"
      :close-on-click-modal="false"
  >

    <el-form ref="elForm" :model="Role" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="Role.roleName" placeholder="请输入角色名称" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="描述信息" prop="remark">
        <el-input v-model="Role.remark" type="textarea" placeholder="请输入描述信息"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="onClose">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  </el-dialog>


</template>

<script>
import {amendRole} from "@/network/system/role";

export default {
  name: "amend",
  data() {
    return {
      Role: {
        roleName: '',
        remark: '',
        id:0
      },
      rules: {
        roleName: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入描述信息',
          trigger: 'blur'
        }],
      }
    }
  }, props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    RoleInfo: {
      type: Object,
      default: () => {
        {
        }
      }
    }
  },
  watch: {
    RoleInfo:function () {
      //监听绑定数据
      this.Role.roleName = this.RoleInfo.roleName
      this.Role.remark = this.RoleInfo.remark
      this.Role.id=this.RoleInfo.id
    }
  },
  created() {
  }, methods: {
    /*关闭窗口*/
    onClose() {
      //重置菜单
      this.$refs['elForm'].resetFields()
      //关闭弹窗
      this.$emit('update:visible', false)
    },
    /*提交*/
    submit() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        console.log(this.Role)
        amendRole(this.Role).then((res) => {
          //更新角色列表
          this.$emit("updateRoleList")
        })

        this.onClose()
      })
    }
  }
}
</script>

<style scoped>

</style>